<!--
 * @Author: luoyong/471826078@qq.com
 * @Date: 2020-07-02 09:57:17
 * @LastEditors: younghxp
-->
<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="secondaryTitle secondaryTitleTheme">
          参保信息
          <el-button
            class="commonBut funComBut saveBtn fr modify"
            icon="icon iconfont icontianjia"
            v-if="!info"
            v-sdc
            @click="addInsurance"
          >
            <span class="opetareText">添加</span>
          </el-button>
          <el-button
            class="commonBut funComBut saveBtn fr modify"
            icon="icon iconfont iconbianji"
            v-else
            v-sdc
            @click="modifyInsurance"
          >
            <span class="opetareText">修改</span>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <div slot="empty" v-if="!info" class="emptyBox">
      <img src="../../../static/img/noData.png" alt />
      <p>暂无信息，请及时补充</p>
    </div>
    <el-row class="insuranceBox" v-else>
      <el-col :span="24">
        <el-row class="insuranceDetail detailInfoItemSty">
          <el-col :span="8">
            <span class="labelWidth color333 fontWeight">受理机构：</span>
            <span class="information">{{ info ? info.bureau : '--' }}</span>
          </el-col>
          <el-col :span="8">
            <span class="labelWidth color333 fontWeight">单位编号：</span>
            <span class="labelWidth color666 fontWeight">{{
              info ? info.insNo : '--'
            }}</span>
          </el-col>
          <el-col :span="8">
            <span class="labelWidth color333 fontWeight">缴费日期：</span>
            <span class="labelWidth color666 fontWeight">{{
              info ? info.insDate : '--'
            }}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24">
        <el-row class="detailInfoItemSty">
          <el-col :span="8">
            <span class="labelWidth color333 fontWeight">参保单位：</span>
            <span class="information">{{
              info ? info.companyName : '--'
            }}</span>
          </el-col>
          <el-col :span="8">
            <span class="labelWidth color333 fontWeight"
              >社会保险缴费征集通知单：</span
            >
            <span
              v-if="info.fileList.length > 0"
              class="information"
              style="width: 50px"
              >已上传</span
            >
            <el-link
              v-if="info.fileList.length > 0"
              type="primary"
              @click="toUploadFile(info.fileList)"
              style="vertical-align: inherit"
              >查看</el-link
            >
            <contractEnclosureDialog
              v-if="info.fileList.length > 0 && uploadContract"
              dialogTitle="社会保险缴费征集通知单"
              :tableData="tableData"
              @closeDialog="hiddenDialog"
            ></contractEnclosureDialog>
            <span v-if="info.fileList.length === 0">未上传</span>
          </el-col>
          <el-col :span="8">
            <span class="labelWidth color333 fontWeight">税收完税证明：</span>
            <!-- <div class="demo-image__preview" style="width:calc(100% - 180px)">
                <span v-if="info.fileList.length > 0"> -->
            <span
              v-if="info.fileList.length > 0"
              class="information"
              style="width: 50px"
              >已上传</span
            >
            <el-link
              v-if="info.fileList.length > 0"
              type="primary"
              @click="toUploadFileTwo(info.fileList)"
              style="vertical-align: inherit"
              >查看</el-link
            >
            <contractEnclosureDialog
              v-if="info.fileList.length > 0 && uploadContractTwo"
              dialogTitle="税收完税证明"
              :tableData="tableDataTwo"
              @closeDialog="hiddenDialogTwo"
            ></contractEnclosureDialog>
            <!-- </span> -->
            <span v-if="info.fileList.length == 0">未上传</span>
            <!-- </div> -->
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'baseInfo',
  data() {
    return {
      uploadContract: false,
      uploadContractTwo: false,
      tableData: [],
      tableDataTwo: [],
    }
  },
  props: {
    info: {
      type: Object,
      required: true,
      default: null,
    },
    isShowUpdate: {
      type: Boolean,
      required: true,
      default: false,
    },
    projectId: {},
    projectName: {},
  },
  methods: {
    /**
     * @name: 新增-工伤保险-参保记录
     * @param {type}
     * @Author: luoyong
     */
    async addInsurance() {
      await this.getMiniRule()
      if (this.isIns === 0) {
        this.$message.error(
          '根据小项目配置规则，该项目无需添加工伤保险，如有问题请联系当地监察'
        )
        return
      }
      this.$router.push({
        name: 'EsAddInsurance',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/EsInsurance/EsInsurance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取小项目规则
    getMiniRule() {
      return this.axios({
        method: 'post',
        url: 'api-p/project/expand/findMiniProConfig',
        data: {
          projectId: this.projectId,
        },
      })
        .then((res) => {
          if (!res.data.hasError && res.data.result) {
            this.isIns = res.data.result.isIns
          }
        })
        .catch((error) => {
          this.$message.error('查询失败')
        })
    },
    /**
     * @name: 修改-工伤保险-参保记录
     * @param {string} id 参保记录id
     * @Author: luoyong
     */
    modifyInsurance() {
      this.$router.push({
        name: 'EsEditInsurance',
        query: {
          projectId: this.projectId,
          projectName: this.projectName,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/EsInsurance/EsInsurance',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toUploadFile(tableData) {
      let newTableData = tableData.filter((item, i) => {
        return item.contentType != 'INS_PAY'
      })
      this.tableData = newTableData
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    toUploadFileTwo(tableData) {
      let newTableData = tableData.filter((item, i) => {
        return item.contentType == 'INS_PAY'
      })
      this.tableDataTwo = newTableData
      this.uploadContractTwo = true
    },
    hiddenDialogTwo() {
      this.uploadContractTwo = false
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  background-color: #fff;
  padding: 24px 24px 0;
}
.secondaryTitle {
  position: relative;
}
.modify {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer !important;
}
.insuranceBox {
  font-size: 14px;
  padding: 0 16px 24px;
  .insuranceDetail {
    .el-row {
      margin-bottom: 16px;
    }
    .content {
      color: #2a2a2a;
    }
  }
  .picBox {
    margin-right: 12px;
    border: 1px solid #e4ebf1;
    border-radius: 4px;
    .picStyle {
      width: 100px;
      height: 100px;
      .imgStyle {
        width: 100%;
        height: 100%;
      }
    }
    .picTipStyle {
      text-align: center;
    }
  }
}

.labelWidth {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  // line-height: 36px;
}
.information {
  font-size: 14px;
  color: #666;
  font-weight: 400;
  display: inline-block;
  width: calc(100% - 100px);
}
.demo-image__preview {
  display: inline-block;
  vertical-align: top;
  // margin-top: 8px;
}
.opetareText {
  cursor: pointer;
}
.emptyBox {
  text-align: center;
  img {
    margin-top: 15px;
    display: inline-block;
    height: 123px;
  }
  p {
    color: #999999;
    margin-top: 15px;
  }
}
</style>
